#import "../tpl.typ": conf
#show: doc => conf(
  [CSS 选择器],
  doc
)

= CSS 选择器

在 CSS 中，选择器 @selectors 用于匹配或选择元素，然后对它们添加样式属性。

== 基本选择器

- `*`：选择所有元素
- `p`：选择所有的 `p` 元素
- `.index`：选择所有类名 `class="index"` 的元素
- `#index`：选择所有 `id="index"` 的元素
- `p.myClass#myId`：选择类名为 `myClass` 且 id 为 `myId` 的 p 元素

== 组合器

组合器（Combinators）用于定义选择器之间的关系，从而更精确的选择目标元素。CSS 有四种主要的组合器。

=== 后代组合器

语法：`A B`

作用：选择元素 `A` 的所有后代元素 `B`，无论 `B` 嵌套多深。

```css
div p {
  color: red;
}
```

=== 子组合器

语法：`A > B`

作用：选择元素 `A` 的直接子元素 `B`，不包含嵌套更深的 `B` 元素。

```css
div > p {
  color: blue;
}
```

=== 相邻兄弟组合器

语法：`A + B`

作用：选择紧接在元素 `A` 之后的第一个兄弟元素 `B`。

```css
h1 + p {
  font-weight: bold;
}
```


=== 通用兄弟组合器

语法：`A ~ B`

作用：选择元素 `A` 之后的所有兄弟元素 `B`，不要求紧邻。

```css
h1 ~ p {
  color: green;
}
```

#bibliography("./refs.yml", title: "参考资料")